<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="800px"
    append-to-body
    :close-on-click-modal="false"
    @close="closeModal"
  >
    <el-form ref="form" :model="form" :show-message="false" label-width="110px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="服务商名称" prop="cname" required>
            <el-input
              v-model.trim="form.cname"
              placeholder="请输入服务商名称"
              :maxLength="12"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属事业部" prop="channelId" required>
            <SelectEnterprise :defaultValue.sync="form.channelId" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务商联系人" prop="contactName">
            <el-input
              v-model.trim="form.contactName"
              placeholder="请输入联系人"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人电话" prop="phone">
            <el-input
              v-model.trim="form.phone"
              placeholder="请输入联系电话"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="联系人邮箱" prop="contactsMail">
            <el-input
              v-model.trim="form.contactsMail"
              placeholder="请输入联系人邮箱"
              clearable
            ></el-input>
          </el-form-item>
        </el-col> -->

        <el-col :span="24">
          <el-form-item label="单位地址" props="province" required>
            <div class="disFlxAC">
              <el-cascader
                v-if="open && !mapOpen"
                style="width: 100%"
                :options="options"
                :props="props"
                v-model="areaList"
                @change="changeAreaList"
                required
              ></el-cascader>
              <div
                @click="mapOpen = true"
                style="width: 60px"
                class="disFlxCC colorZS"
              >
                <i class="iconfont el-icon-location fz-28" />
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="详细地址" prop="address" required>
            <el-input v-model="form.address" placeholder="请输入详细地址" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="营业执照" prop="businessimg">
            <ImageUpload v-model="form.businessimg" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="服务商简介" prop="remarks">
            <el-input
              v-model="form.remarks"
              type="textarea"
              :rows="3"
              placeholder="请输入服务商简介"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!form.id">
        <el-col :span="12">
          <el-form-item label="管理员姓名" prop="adminname" required>
            <el-input v-model="form.adminname" placeholder="请输入管理员姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="honorific" required>
            <el-radio-group v-model="form.honorific">
              <el-radio
                v-for="dict in dict.type.sys_user_sex"
                :key="dict.value"
                :label="dict.value"
                >{{ dict.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员手机号" prop="mobile" required>
            <el-input
              v-model="form.mobile"
              maxlength="20"
              placeholder="请输入管理员手机号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员账号" prop="adminacc" required>
            <el-input v-model="form.adminacc" placeholder="请输入管理员账号" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>

    <MapDialog :visible.sync="mapOpen" @handelAddress="locationSure" />
  </el-dialog>
</template>

<script>
import SelectEnterprise from "@/views/enterprise/enterprise/selectEnterprise";
import MapDialog from "@/components/IbsAmap/mapDialog";
import ImageUpload from "@/components/ImageUpload";
import { listArea } from "@/api/saas/area";
import { addCompany, updateCompany, getCompany } from "@/api/company/company";

export default {
  dicts: ["sys_user_sex"],
  components: {
    SelectEnterprise,
    MapDialog,
    ImageUpload,
  },
  data() {
    const that = this;
    return {
      title: "新建服务商",
      open: false,
      form: {
        id: undefined,
        companyType: 1, // 0单位 1服务商
        cname: "", // 服务商名称
        channelId: undefined, // 所属事业部
        contactName: "", // 服务商联系人
        phone: "", // 联系电话
        // contactsMail: "", // 邮箱
        province: "", // 省
        city: "", // 市
        distincts: "", // 区
        address: "", // 详细地址
        businessimg: "", // 营业执照
        remarks: "", // 服务商介绍
        adminname: "", // 管理员姓名
        honorific: "0", // 性别
        mobile: "", // 管理员手机号
        adminacc: "", // 管理员账号
      },
      mapOpen: false, // 打开地图选择
      // 省市区级联
      options: [],
      props: {
        label: "name",
        value: "id",
        lazy: true,
        lazyLoad(node, resolve) {
          let clevel = node.level + 1;
          listArea({ pid: node.value, level: clevel }).then((res) => {
            if (clevel === 3) {
              res.data.forEach((v) => {
                that.$set(v, "leaf", true);
              });
              if (!res.data) {
                this.form.distincts = "";
              }
            }
            resolve(res.data);
          });
        },
      },
      areaList: [],
    };
  },
  methods: {
    openModal(id) {
      this.title = id ? "编辑服务商" : "新建服务商";
      this.form.id = id || undefined;
      this.form.id ? this.getData() : this.open = true;
    },
    closeModal() {
      this.$refs["form"].resetFields();
      Object.assign(this.$data.form, this.$options.data().form); // 存在自定义校验规则不能重置data
      this.areaList = [];
      this.open = false;
    },
    // 获取详情
    getData() {
      getCompany(this.form.id).then((res) => {
        this.form = res.data;
        this.form.province ? this.areaList.push(this.form.province) : "";
        this.form.city ? this.areaList.push(this.form.city) : "";
        this.form.distincts ? this.areaList.push(this.form.distincts) : "";
        this.open = true; // 影响省市区回显
      });
    },
    /** 提交按钮 */
    submitForm() {
      const that = this;
      that.$refs["form"].validate(async (valid) => {
        if (valid) {
          if (that.form.id) {
            await updateCompany(that.form);
          } else {
            await addCompany(that.form);
          }
          that.$message.success(that.form.id ? "修改成功" : "新增成功");
          that.$emit("refresh");
          that.closeModal();
        }
      });
    },
    // 省市区选择
    changeAreaList(e) {
      e.forEach((item, index) => {
        if (index === 0) {
          this.form.province = item;
          this.form.city = "";
          this.form.distincts = "";
        }
        if (index === 1) {
          this.form.city = item;
          this.form.distincts = "";
        }
        if (index === 2) {
          this.form.distincts = item;
        }
      });
    },
    locationSure(e) {
      this.areaList = e.areaList;
      this.changeAreaList(e.areaList);
      this.form.address = e.address;
      console.log(e, "地图选点", this.form);
    },
  },
};
</script>

<style lang="scss" scoped></style>
